<template>
  <!-- 顶部导航 -->
  <div class="xtx_topnav">
    <div class="container">
      <ul class="xtx_navs">
        <li v-if="!token">
          <router-link to="/login">请先登录</router-link>
        </li>
        <li v-if="!token">
          <router-link to="/register">免费注册</router-link>
        </li>
        <li v-if="token" class="user">
          <router-link to="/member">
            {{account||nickname}}
            <i class="iconfont icon-angle-right"></i>
          </router-link>
          <div class="sheet">
            <router-link tag="span" to="/member">个人中心</router-link>
            <router-link tag="span" to="/member/info">基本信息</router-link>
            <router-link tag="span" to="/member/safe">安全设置</router-link>
            <span tag="span" @click="logout()">退出登录</span>
          </div>
        </li>
        <li>
          <router-link to="/member/order">我的订单</router-link>
        </li>
        <li>
          <a href="javascript:;">会员中心</a>
        </li>
        <li>
          <a href="javascript:;">帮助中心</a>
        </li>
        <li>
          <a href="javascript:;">关于我们</a>
        </li>
        <li>
          <router-link to="/download">
            <i class="mobile iconfont icon-phone"></i>
            手机版
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'app-topnav',
  computed: {
    ...mapState('user', ['token', 'account', 'nickname'])
  },
  methods: {
    logout () {
      this.$store.commit('user/setUser', {})
      this.$store.commit('cart/setCart', [])
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped lang='less'>
.xtx_topnav {
  background-color: #333;
  .xtx_navs {
    height: 53px;
    text-align: right;
    line-height: 53px;
    font-size: 0;
    a {
      display: inline-block;
      line-height: 1;
      padding: 0 15px;
      border-right: 2px solid #666666;
      color: #dcdcdc;
      width: 100%;
      &:hover {
        color: #27ba9b;
      }
    }
    li {
      display: inline-block;
      font-size: 14px;
      position: relative;
      text-align: center;
      &:last-child a {
        border-right: none;
      }
      &.user {
        width: 120px;
        .iconfont {
          transform: rotate(90deg);
          display: inline-block;
          font-size: 10px;
          width: 14px;
        }
        a {
          color: #fff;
        }
        &:hover {
          background: #666666;
          border-left: 1px solid #333;
          border-right: 1px solid #333;
          .sheet {
            display: block;
          }
        }
        .sheet {
          position: absolute;
          left: -1px;
          top: 52px;
          width: 120px;
          background: #666666;
          border: 1px solid #333;
          border-top: none;
          z-index: 99;
          display: none;
          > span {
            height: 40px;
            line-height: 40px;
            display: block;
            color: #dcdcdc;
            cursor: pointer;
            &:hover {
              color: #27ba9b;
            }
          }
        }
      }
    }
  }
}
</style>
